<template>
    <div class="tmpl">
        <!-- 1.0 提交评论 -->
        <div class="postCommentStyle">
            <h4 class="postCommentTitle">
                提交评论
            </h4>
            <div class="submitTextArea">
                <textarea ref="commentTextArea" placeholder="请输入要评论的内容"  rows="3">

                </textarea>
                <mt-button @click="postcomment" type="primary" size="large">提交评论</mt-button>
            </div>
        </div>

        <!-- 2.0 评论列表 -->
        <div class="commentListStyle">
            <h4 class="commentListTitle">
                评论列表
            </h4>
            <div v-for="item in commentList" class="commentContent">
                <h5>{{item.content}}</h5>
                <p>
                    <span class="commentUser">
                        {{item.user_name}}
                    </span>
                    <span class="commentTime">
                        {{item.add_time | dateFmt('YYYY-MM-DD')}}
                    </span>
                </p>
            </div>
            <mt-button @click="loadMore" plain class="loadmore" type="danger" size="large">加载更多</mt-button>
        </div>
    </div>
</template>

<style scoped>
    h4{
        border-bottom: 1px solid rgba(92,92,92,0.3);
        padding: 5px 5px 10px 5px;
    }

    .submitTextArea{
        padding: 5px;
    }

    .commentListStyle{
        padding: 5px;
        margin-top: 20px;
        border-top: 1px solid rgba(92,92,92,0.3);
    }
    .commentContent{
        padding: 5px;
        border-bottom: 1px solid rgba(92,92,92,0.3);
    }

    h5{
        font-size: 16px;
        color: black;
    }

    .commentUser,.commentTime{
        margin-top: 10px;
        color:#0094ff;
        float: left;
        width: 50%;
    }

    .commentTime{
        float: right;
    }

    .commentContent{
        height: 70px;
        overflow-y: auto;
    }

    .loadmore{
        margin-top: 15px;
    }
</style>

<script>
    import common from '../../tools/common.js';

    import { Toast } from 'mint-ui';

    export default{
        data(){
            return {
                pageIndex:1,
                isCompleteLoad:false,
                commentList : []
            };
        },
        created(){
            //获取评论的列表数据
            //console.log("commentId is "+this.commentId);
            this.getCommentListData(this.pageIndex,true);
        },
        methods:{
            //获取评论数据
            /***
             * isFirst 代表是否是第一次加载
             * */
            getCommentListData(pageIndex,isFirst){
                //1.url
                const url = common.apihost+"api/getcomments/"+this.commentId+"?pageindex="+pageIndex

                //2.send request
                this.$http.get(url).then(res=>{
                    if(isFirst){
                        if (res.body.message.length<=0){
                            Toast("还没有评论数据,快来抢占沙发吧!");
                        }
                        this.commentList = res.body.message;
                    }else{
                        if(res.body.message.length<=0){
                            Toast("已经加载完全部的评论啦...");
                            this.isCompleteLoad = true;
                        }
                        this.commentList = this.commentList.concat(res.body.message);
                    }
                },err=>{
                    console.log("加载评论错误");
                    console.log(err);
                })
            },
            //提交评论
            postcomment(){
                //1.得获取评论textarea中的内容
                const commentContent = this.$refs.commentTextArea.value;

                if (!commentContent || commentContent.trim().length<=0){
                    Toast("请输入评论内容!");
                    return;
                }

                //2.url
                const url = common.apihost+"api/postcomment/"+this.commentId;

                //3.post request
                this.$http.post(url,{content:commentContent},{emulateJSON:true}).then(res=>{
                    /**
                     * 成功之后需要做哪几件事
                     * 1.重新获取第一页数据
                     * 2.弹出提醒用户发表成功
                     * 3.清空textarea中的内容
                     * */
                    Toast(res.body.message);

                    this.$refs.commentTextArea.value = "";

                    //重新获取第一页数据
                    this.pageIndex = 1;
                    this.getCommentListData(this.pageIndex,true);
                },err=>{
                    console.log(err);
                })
            },
            //加载更多评论
            loadMore(){
                if (this.isCompleteLoad){
                    return;
                }
                this.pageIndex++;
                this.getCommentListData(this.pageIndex,false);
            }
        },
        props:['commentId']
    }
</script>